Skip to content

feat: URL 파라미터 동기화 (pushState) — #9#17

Open
testofschool wants to merge 1 commit into
PyTorchKorea:mainfrom
testofschool:feature/url-params
Open

feat: URL 파라미터 동기화 (pushState) — #9#17
testofschool wants to merge 1 commit into
PyTorchKorea:mainfrom
testofschool:feature/url-params

Conversation

@testofschool
Copy link
Copy Markdown

이슈: #9

구현 내용

  • 필터/탭/검색/정렬 상태를 URL 쿼리스트링에 동기화하여, 새로고침 시 필터 유지 및 URL 공유가 가능하도록 구현했습니다.
  • syncToURL() 메서드를 추가하여, 상태 변경 시 history.pushState()로 URL을 업데이트합니다.
  • loadFromURL() 메서드를 추가하여, 공유받은 URL의 쿼리 파라미터를 파싱해 필터를 자동 적용합니다.
  • _handlePopState() 핸들러를 추가하여, 뒤로가기/앞으로가기 시 URL에서 상태를 복원합니다.
  • 검색 입력에 x-model.debounce.300ms를 적용하여 타이핑 중 불필요한 히스토리 생성을 방지했습니다.
  • tab, sort 파라미터는 허용 목록으로 검증하여 잘못된 값(?tab=hacked)은 무시됩니다.
  • 복수 필터는 쉼표 구분 방식(?learning=VLA,IL)을 사용합니다.
  • 추후 필터 추가를 고려하여 syncToURL, loadFromURL, 허용 목록에 // 필터 추가 시 여기도 수정 주석을 추가했습니다.

수정 파일

docs/index.html — 이 파일만 수정 (Python, YAML, GitHub Actions 변경 없음)

pushState 채택 근거

이슈에서는 replaceState를 제안했으나, 오프라인 미팅에서 필터 히스토리를 뒤로가기로 탐색할 수 있는 것이 유용하다는 의견이 있어 pushState로 변경했습니다. popstate 이벤트 핸들러를 함께 구현하여 뒤로가기/앞으로가기 시 UI가 정상 복원됩니다.

URL 파라미터 목록

파라미터 상태 키 기본값 예시
tab activeTab models ?tab=datasets
q search (빈 문자열) ?q=LeRobot
sort sortBy stars ?sort=year_desc
year filters.years [] ?year=2023,2024
category filters.categories [] ?category=manipulation
hardware filters.hardware [] ?hardware=humanoid
learning filters.learning [] ?learning=VLA,IL
source filters.sources [] ?source=real
toolType filters.toolTypes [] ?toolType=physics_engine

테스트

# 시나리오 예상 결과
1 VLA 클릭 URL → ?learning=VLA
2 F5 새로고침 VLA 필터 유지
3 VLA → humanoid → 뒤로가기 humanoid 해제, VLA만 남음
4 뒤로가기 한번 더 필터 없는 초기 상태
5 앞으로가기 VLA 필터 복원
6 URL 복사 → 새 탭 같은 필터 화면
7 전체 해제 쿼리스트링 제거
8 ?tab=hacked 무시, 기본 models 탭
9 "LeRobot" 타이핑 타이핑 끝난 후 1번만 URL 변경
10 복합 필터 전부 URL 반영, 새로고침 유지

@testofschool testofschool requested a review from jih0-kim as a code owner May 16, 2026 08:11
Copy link
Copy Markdown
Member

@jih0-kim jih0-kim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

URL 기능 추가 감사합니다. 아래 코멘트 사항 확인 부탁드려요!

Comment thread docs/index.html
</script>
</body>
</html>
</html> No newline at end of file
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

POSIX 표준에서는 파일을 텍스트 라인의 연속으로 정의합니다. 파일의 끝(EOF)에 개행 문자가 없으면 마지막 줄을 올바른 라인으로 인식하지 못하는 오류가 발생할 수 있습니다. ENTER를 추가해서 수정 요청 드립니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants